<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import Table from '@/components/admin/Table.vue'
import Dialog from '@/components/admin/EditDialog.vue'
import inlineDialog from '@/components/admin/inlineDialog.vue';
import {
  GetOrderViewMessageService,
  deleteOrderNoticeUrlService,
  deleteOrderNoticeUrlsService
} from '@/api/orderview.js'
import {ElMessage} from "element-plus";

const columns = [
  {
    name: 'order_id',
    label: '订单编号',
    search: true,
    valueType: 'input',
    span: 8,
    attrs: {
      placeholder: '请输入',
    },
  },
  {
    name: 'mobile',
    label: '手机号',
    search: true,
    valueType: 'input',
    span: 8,
    attrs: {
      placeholder: '请输入',
    },
  },
  {
    name: 'totalprice',
    label: '价格',
    search: true,
    sortable: true,
    valueType: 'input',
    span: 8,
    attrs: {
      placeholder: '请输入',
    },
  },
  {
    name: 'order_time',
    label: '上架日期',
    sorter: true,
    search: true,
    valueType: 'date-picker',
    span: 8,
  },
]
let baseColumns = reactive(columns)

// 表格相关参数
const orderMsg = ref({
  columns: [
    {
      label: '订单编号',
      prop: 'order_id',
      width: '130',
    },
    {
      label: '商品名称',
      prop: 'shop_name',
      width: '130',
    },
    {
      label: '商品种类',
      prop: 'kind',
      width: '130',
    },
    {
      label: '图片',
      prop: 'picture_url',
      width: '250',
      type: 'pic',
    },
    {
      label: '数量',
      prop: 'quantity',
      width: '100'
    },
    {
      label: '总价格',
      prop: 'totalprice',
      width: '150',
      formatter: (row) => {
        return row.totalprice + '元'
      }
    },
    {
      label: '订单建立时间',
      prop: 'order_time',
      width: '200'
    },
    {
      label: '收货地址',
      prop: 'city',
      width: '200',
      formatter: (row) => {
        return `${row.province}${row.city}${row.region}${row.detail}`;
      },
    },
    {
      label: '收货人',
      prop: 'name',
      width: '200'
    },
    {
      label: '手机号',
      prop: 'mobile',
      width: '200'
    },
    {
      label: '支付状态',
      prop: 'buy_status',
      width: '150',
      type: 'tag',
      formatter: (row) => {
        switch (row.buy_status) {
          case '0': {
            return '未支付'
          }
          case '1': {
            return '已支付'
          }
          case '2': {
            return '已取消'
          }
        }
      }
    },
  ],
  data: [],
  loading: true
})
// 展示数据
const getList = (keyword) => {
  GetOrderViewMessageService(all.page, all.limit, keyword)
      .then((res) => {
        orderMsg.value.data = res.data.results.data
        // 获取数据总数
        all.total = res.data.count
        orderMsg.value.loading = false
        // console.log(res.data.results.data)
      })
      .catch((err) => {
        console.log(err)
      })
}
onMounted(() => {
  getList()
})
// 分页
const all = reactive({
  // 总数
  total: 0,
  // 页
  page: 1,
  // 条
  limit: 10,
})
const sizeChange = (val) => {
  all.limit = val;
  getList()
};
/**
 * 页
 * val -- 当前条
 */
const currentChange = (val) => {
  all.page = val;
  getList()
};

// 查询
const onSubmit = (val) => {
  console.log(val)
  orderMsg.value.loading = true
  setTimeout(() => {
    getList(val)
  }, 1000)
}
// 行特定高亮
// 行特定高亮
const tableRowClassName = (row, callback) => {
  const current_time = new Date()
  const target_time = new Date(row.order_time)
  const timeDifference = current_time - target_time;
  // 将时间差转换为小时
  const hoursDifference = timeDifference / (1000 * 60 * 60);
  if (hoursDifference > 3 && row.buy_status === '0') {
    callback('warning-row')
  } else {
    callback('')
  }
}

// 绑定表格的内容(选项selection)
const multipleTableRef = ref()
// 单个删除组件
const handleDelete = (row) => {
  const params = row.id;
  console.log(params)
  deleteOrderNoticeUrlService(params).then((res) => {
    console.log(res.data);
    getList()
  });
}
// 批量选择并删除
const multipleSelection = ref([]);
const selectionchange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
// 批量选择并删除
const handleDeleteArray = () => {
  if (multipleSelection.value.length <= 0) {
    ElMessage.warning('麻烦你选中了再点')
  }
  for (var i = 0; i < multipleSelection.value.length; i++) {
    const params = multipleSelection.value[i].id;
    const Ids = []
    Ids.push(...multipleSelection.value.map(row => row.id))
    console.log(Ids);
    deleteOrderNoticeUrlsService({Ids: Ids})
        .then((res) => {
          multipleSelection.value = []
          console.log(res.data);
          getList()
        });
  }
}
</script>
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <inlineDialog @submit="onSubmit" :columns="baseColumns"/>
      </div>
    </template>
    <div class="operbutton">
      <el-button type="danger" @click="handleDeleteArray">批量删除</el-button>
    </div>
    <Table
        ref="multipleTableRef"
        :customdata="orderMsg"
        :all="all"
        @handleSizeChange="sizeChange"
        @handleCurrentChange="currentChange"
        @handleSelectionChange="selectionchange"
        @rowClassName="tableRowClassName"
    >
      <template #buy_status="{row}">
        <el-tag v-if="row.buy_status === '2'" size="large" type="info">已取消</el-tag>
        <el-tag v-if="row.buy_status === '1'" size="large" type="success">已支付</el-tag>
        <el-tag v-if="row.buy_status === '0'" size="large" type="danger">未支付</el-tag>
      </template>
      <template #picture_url="{row}">
        <div>
          <el-image
              fit="cover"
              :src="row.picture_url"
              :preview-src-list="[row.picture_url]"
              style="width: 120px; height: 120px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              preview-teleported="true"
          />
        </div>
      </template>
      <template #operate>
        <el-table-column label="操作" fixed="right" width="180" show-overflow-tooltip>
          <template #default="scope">
            <el-button
                    size="small"
                    type="primary"
                >修改
                </el-button>
            <el-popconfirm title="是否确定要删除吗" confirm-button-text="是" cancel-button-text="否"
                           @confirm="handleDelete(scope.row)">
              <template #reference>
                <el-button
                    size="small"
                    type="danger"
                >删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </Table>
  </el-card>
</template>

<style scoped>

.operbutton {
  margin-bottom: 30px;
}
</style>